<template>
	<view class="container">
		<view class="s_card radius">
			<uni-segmented-control :current="current" :values="items" @clickItem="clickBindType" style-type="text" active-color="#007AFF"></uni-segmented-control>
			<!-- <swiper class="swiper" :indicator-dots="false" :autoplay="false" :duration="500" :circular="false" @change="changBindType"
			 :current="current">
				<swiper-item> -->
			<view style="padding-top: 24rpx;" v-if="current == 0 ">
				<view class="input_box_hotw">
					<text class="input_label">手机号码</text>
					<input style="width: calc(100% - 64upx);" type="number" v-model="phone" placeholder="输入本人常用11位手机号码" maxlength="11"
					 confirm-type="核对" @blur="checkPhone" />
				</view>
				<view class="input_box_hotw">
					<text class="input_label">短信验证</text>
					<input style="width: calc(100% - 64upx - 230upx);" type="number" placeholder="6位数字验证码" v-model="code" maxlength="6"
					 confirm-type="完成" />
					<button class="input_btn border_no" :disabled="sendRqing" size="mini" style="width: 230upx;" @click="sendRqCode"
					 type="default">{{btnText}}</button>
				</view>
				<view class="hint wanring">
					{{hint}}<!-- 该手机并没有绑定相关的校园IC卡档案，请使用绑定了校园IC卡档案的手机号码 -->
				</view>
			</view>
			<!-- </swiper-item>
				<swiper-item> -->
			<!-- <view class="s_card "> -->
			<view style="padding-top: 24rpx;" v-else>
				<view class="input_box_hotw" @click="showChangSchool">
					<text class="input_label">选择学校</text>
					<input style="width: calc(100% - 64upx);" disabled="true" type="text" :value="school.orgName"
					 placeholder="请输入您所在的学校" />
				</view>
				<!-- <view class="s_card "> -->
				<view class="input_box_hotw">
					<text class="input_label">校园IC卡</text>
					<input style="width: calc(100% - 64upx);" type="number" v-model="cardNo" placeholder="输入本人使用的校园IC卡" maxlength="11" />
				</view>
				<view class="input_box_hotw">
					<text class="input_label">IC卡密码</text>
					<input style="width: calc(100% - 64upx);" password type="password" placeholder="本人校园IC卡密码" v-model="cardPwd" maxlength="6"
					 confirm-type="完成" />
				</view>
				<view class="hint wanring">
					{{hint}}
				</view>
			</view>
			<!-- </view> -->
			</swiper-item>
			</swiper>
		</view>
		<view class="submit">
			<button class="submitBtn radius_btn" :disabled="!agreement" @click="bindCard">立即绑定
				<uni-icons v-if="consuming" type="arrowthinright" color="#FFF" size="20"></uni-icons>
			</button>
		</view>
		<view class="agreement">
			<!-- <checkbox-group @change="agreementChange">
				<label>
					<checkbox color="#007AFF" :value="1" @click="" :checked="agreement" /><text>我已阅读并同意<text style="color:#007AFF">《用户协议》</text></text>
				</label>
			</checkbox-group> -->
		</view>


		<!-- 底部选择学校弹窗 -->
		<uni-popup ref="showSchool" type="bottom">
			<view class="uni-share">
				<text class="uni-share-title">选择学校</text>
				<view class="">
					<view class="input_box_hotw">
						<uni-icons type="search" size="30" color="#999"></uni-icons>
						<input type="text" style="width: calc(100% - 120upx);" @input="searchSchoolList(1000)" v-model="search"
						 placeholder="请输入学校名称进行搜索" />
					</view>
					<!-- <view class="schoolList"> -->
					<scroll-view scroll-y="true" class="schoolList" refresher-threshold="45" refresher-enabled="true">
						<radio-group @change="schoolChange">
							<label v-for="(item,index) in schoolList" :key="index" class="item">
								<!-- <label class="radio"> -->
								<text>{{item.orgName}}</text>
								<radio color="#007AFF" :value="item.orgId" />
								<!-- </label> -->
							</label>
						</radio-group>
					</scroll-view>
					<!-- </view> -->
				</view>
				<view class="uni-share-btn">
					<!-- <text class="" @click="confirm('share')">确认</text> -->
					<text class="" @click="cancel('share')">取消</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getProfile,
		binding,
		sendRqCode,
		getSchoolList,
		bindingForCard
	} from '../../common/api/hot_water.js'
	import {
		isNull,
		getQueryString,
		chkPhone,
	} from '../../common/js/utils.js'
	let _this;
	export default {
		data() {
			return {
				agreement: true,
				phone: '',
				code: '',
				checked: false,
				items: ['手机号绑定', 'IC卡号绑定'],
				current: 0,
				hint: '',
				user: uni.getStorageSync('userInfo'),
				cardInfo: [],
				school: {},
				// showChangSchool: false
				search: '',
				schoolList: [],
				cardNo: '',
				cardPwd: '',
				btnText: '发送验证码',
				sendRqing: false
			}
		},
		onLoad(option) {
			_this = this;
		},
		watch: {
			current(oldV, newV) {
				this.hint = ""
			}
		},
		computed: {},
		methods: {
			agreementChange(res) {
				this.agreement = res.detail.value[0] === "1"
			},
			// 验证手机号码是否正确,或是否已绑定了IC卡
			checkPhone() {
				if (this.phone === "") {
					this.hint = "请输入手机号码"
					this.checked = true
					return
				}
				this.checked = !chkPhone(this.phone)
				if (this.checked) {
					this.hint = "手机号码有误，请输入正确的11位手机号码"
					return
				}


				getProfile({
					phoneNo: this.phone
				}).then(res => {
					if (res.code === 0) {
						this.checked = false
						this.hint = ""
						this.cardInfo = res.data
					} else if (res.code === 500) {
						this.checked = true
						this.hint = "该手机并没有绑定相关的校园IC卡档案，请使用绑定了校园IC卡档案的手机号码"
					} else {
						this.checked = true
						this.hint = res.msg
					}

				})
			},
			// 发送手机验证码
			sendRqCode() {
				if (this.phone !== "") {
					sendRqCode({
						phoneNo: this.phone
					}).then(res => {
						console.log(res)
						if (res.code === 500) {
							this.checked = true
							this.hint = res.msg
						} else {
							this.checked = false
							this.hint = ""
							this.sendRqing = true
							this.countdown(60)
						}

					})
				}
			},
			// 绑定校园IC卡
			bindCard() {
				// 手机绑定
				if (this.current == 0) {
					if (this.phone !== "" && this.code !== "" && !this.checked) {
						binding({
							mobileNo: this.phone,
							code: this.code,
							userId: this.user.userId,
							...this.cardInfo[0]
						}).then(res => {
							console.log(res)
							if (res.code === 0) {
								this.hint = ""
								uni.showToast({
									icon: 'success',
									title: '绑定成功',
									duration: 2500,
									success() {
										setTimeout(() => {
											uni.reLaunch({
												url: '/pages/index/index'
											})
										}, 2000)
									}
								})
							} else {
								this.hint = res.msg
							}

						})
					}
					// IC卡绑定
				} else {
					if (!this.school.orgId) {
						this.hint = "请选择学校机构";
						return
					}
					if (this.cardNo === "") {
						this.hint = "请输入IC卡号码";
						return
					}
					if (this.cardPwd === "") {
						this.hint = "请输入IC卡密码";
						return
					}
					bindingForCard({
						userId: this.user.userId,
						cardNo: this.cardNo,
						cardPwd: this.cardPwd,
						orgId: this.school.orgId
					}).then(res => {
						if (res.code === 0) {
							this.hint = ""
							uni.showToast({
								icon: 'success',
								title: '绑定成功',
								duration: 2500,
								success() {
									setTimeout(() => {
										uni.reLaunch({
											url: '/pages/index/index'
										})
									}, 2000)
								}
							})
						} else if (res.code === 500) {
							// 没有查到数据
							this.hint = res.msg
						} else {
							this.hint = res.msg
						}
					})
				}
			},
			changBindType(res) {
				this.current = res.detail.current
			},
			clickBindType(res) {
				this.current = res.currentIndex
			},
			// 查询学校组织
			searchSchoolList(time) {
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					getSchoolList({
						name: this.search
					}).then(res => {
						if (res.code === 0) {
							this.schoolList = res.data
						} else if (res.code === 500) {
							// 没有查到数据
						} else {
							this.hint = res.msg
						}
					})
				}, time)
			},
			// 展示学校
			showChangSchool() {
				console.log(1)
				this.$nextTick(() => {
					this.$refs.showSchool.open();
					this.search = "";
					this.searchSchoolList(0);
				})
			},
			// 选择学校
			schoolChange(e) {
				this.school = this.schoolList.filter(item => {
					return item.orgId == e.detail.value
				})[0]
				this.$refs.showSchool.close()
			},
			cancel(type) {
				this.$refs.showSchool.close()
			},
			// 倒计时
			countdown(time) {
				clearTimeout(this.timer)
				time -= 1
				if (time > 0) {
					this.btnText = time + "S"
					this.timer = setTimeout(() => {
						this.countdown(time)
					}, 1000)
				} else {
					this.btnText = "发送验证码"
					this.sendRqing = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.s_card {
		box-shadow: none;
		height: calc(100vh - 24upx - 48upx - 50px - 24px -24upx);
	}

	.container {
		padding-top: 24upx;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: #F1F0F5;
	}

	.swiper {
		height: 270px;
		padding-top: 30px;
	}

	.agreement {
		display: flex;
		justify-content: center;
		margin: 36upx 0;
		text-align: center;
		font-size: 28upx;
		color: #999;
	}

	.hint {
		padding-top: 40upx;
		height: 100upx;
		color: #e74c3c;
		font-size: 30upx;
	}

	.uni-share {
		display: flex;
		flex-direction: column;
		background-color: #FFF;
		border-top-right-radius: 36upx;
		border-top-left-radius: 36upx;

		.schoolList {
			width: 100%;
			height: 600upx;
			margin: 20upx 0;
			// overflow-y: auto;
		}

		.item {
			padding: 0 24upx;
			line-height: 100upx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			// text-align: center;
		}

		.uni-share-btn,
		.uni-share-title {
			height: 100upx;
			line-height: 100upx;
			font-weight: bolder;
			border-bottom: 1px #f5f5f5 solid;
			text-align: center;
			color: #333;
		}

		.uni-share-btn {
			display: flex;
			justify-content: space-around;
			color: #007AFF;
			border: none;
			border-top: 1px #f5f5f5 solid;

			text {
				width: 50%;
			}
		}
	}
</style>
